<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header">
    <style type="text/css">
        .menu {
            width: 250px;
            height: 100%;
            position: fixed;
            background-color: seagreen;
            -webkit-transition: all 1s;
            transition: all 1s;
            left: 0;
            z-index: 50;
            overflow-y: auto;
            padding-bottom: 100px;
        }

        .menu.closed {
            left: -250px;
        }

        #toggle {
            background-color: seagreen;
            height: 100%;
            min-height: 100%;
            width: 50px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0px;
            z-index: 25;
            -webkit-transition: all 0.7s ease;
            transition: all 0.7s ease;
        }

        #toggle:hover {
            cursor: pointer;
        }

        #toggle.closed {
            left: 0px;
            top: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            opacity: 0.3;
        }

        .content {
            width: 100%;
            height: 100%;
            margin-left: 0px;
            -webkit-transition: all 0.4s;
            transition: all 0.4s;
        }

        .content.closed .text {
            -webkit-transform: translateX(80px);
            -ms-transform: translateX(80px);
            transform: translateX(80px);
        }

        .text {
            width: 60%;
            margin: auto;
            -webkit-transition: all 1s;
            transition: all 1s;
            margin-top: 80px;
            margin-bottom: 80px;
        }

        h1,
        h2 {
            color: #444;
        }

        p {
            color: #444;
        }

        p img {
            float: left;
            margin: 15px;
        }

        .menu ul {
            list-style-type: none;
            padding: 0;
            margin: 85px 0 0 40px;
            padding-right: 40px;
        }

        .menu ul li {
            color: floralwhite;
            font-size: 20px;
            margin: 0 0 5px 0;
            display: block;
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

        .menu ul li:hover {
            background-color: #3bb16f;
            cursor: pointer;
        }

        #wrapper {
            height: 100%;
            min-height: 100%;
            position: fixed;
            overflow-y: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #wrapper.closed {
            position: fixed;
        }

        hr {
            border: none;
            height: 1px;
            background-color: seagreen;
            position: relative;
            width: 90%;
            margin-left: 0;
        }

        hr:before {
            content: "/";
            display: block;
            top: -8px;
            left: -5px;
            position: absolute;
            color: seagreen;
        }

        *::-moz-selection {
            background-color: #1b5233;
            color: floralwhite;
        }

        *::selection {
            background-color: #1b5233;
            color: floralwhite;
        }
    </style>
</head>
<link rel="stylesheet" th:href="@{/css/yw.css}">
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        工艺单项目看板
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="row"><br>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label >项目编号：</label><label th:text="${craProQueryModel.code}"></label>
                            <input id="proId" name="proId" th:value="${craProQueryModel.id}" type="hidden">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>项目名称：</label><label th:text="${craProQueryModel.name}"></label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>项目数量：</label><label th:text="${craProQueryModel.num}"></label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>安装地点：</label><label th:text="${craProQueryModel.address}"></label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>需方：</label><label th:text="${craProQueryModel.demander}"></label>
                        </div>
                    </div>
                </div>
                <!--<div class="box-header">-->
                    <!--<table id="t1" class="t1">-->
                        <!--<thead style="display: table-header-group">-->
                        <!--<tr>-->
                            <!--<td colspan="14">-->
                                <!--<img th:src="@{/img/logo3.jpg}" width="40px" height="40px" style="margin-top: -30px">-->
                                <!--<div style="display: inline-block;margin-top: 5px;margin-left: 20px">-->
                                    <!--<span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>-->
                                    <!--<span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>-->
                                <!--</div>-->
                            <!--</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<td colspan="2" style="width: 8%;">项目编号</td>-->
                            <!--<td style="width: 10%;">-->
                                <!--[[${craProQueryModel.code}]]-->
                            <!--</td>-->
                            <!--<td style="width: 8%">项目名称</td>-->
                            <!--<td colspan="3" style="width: 20%">-->
                                <!--[[${craProQueryModel.name}]]-->
                            <!--</td>-->
                            <!--<td style="width: 8%">项目数量</td>-->
                            <!--<td style="width: 6%">-->
                                <!--[[${craProQueryModel.num}]]-->
                            <!--</td>-->
                            <!--<td style="width: 6%">安装地点</td>-->
                            <!--<td style="width: 15%">-->
                                <!--[[${craProQueryModel.address}]]-->
                            <!--</td>-->
                            <!--<td style="width: 6%">需方</td>-->
                            <!--<td style="width: 15%">-->
                                <!--[[${craProQueryModel.demander}]]-->
                            <!--</td>-->
                        <!--</tr>-->

                        <!--</thead>-->

                    <!--</table>-->

                <!--</div>-->
                <div class="box-body">
                    <div class="mainbox">
                        <div class="responsive">
                            <table>
                                <tbody>
                                <tr>
                                    <th style="background:#e4644a;border-right:2px solid #fff;">工作组</th>
                                    <th style="background:#6A737A;border-right:2px solid #fff;">工艺编制</th>
                                    <th style="background:#6A6545;border-right:2px solid #fff;">成本信息输出</th>
                                    <th style="background:#6A6545;border-right:2px solid #fff;">操作</th>
                                </tr>
                                <tr th:each="tableData:${craProQueryModelList}">
                                    <td th:text="${tableData.deptName}"></td>
                                    <td>
                                        <i class="text-grey fa fa-circle-o" th:if="${tableData.taskStatue} eq 1 "></i>
                                        <i class="text-red fa fa-circle" th:if="${tableData.taskStatue} eq 4 "></i>
                                        <i class="text-yellow fa fa-clock-o" th:if="${tableData.taskStatue} eq 2"></i>
                                        <i class="text-green fa fa-circle" th:if="${tableData.taskStatue} eq 3"></i>
                                    </td>
                                    <td>
                                        <i class="text-grey fa fa-circle-o" th:if="${tableData.status} eq 1 "></i>
                                        <i class="text-red fa fa-circle" th:if="${tableData.status} eq 4 "></i>
                                        <i class="text-yellow fa fa-clock-o" th:if="${tableData.status} eq 2"></i>
                                        <i class="text-green fa fa-circle" th:if="${tableData.status} eq 3"></i>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-success" id="btn-search" shiro:hasPermission="tec:proSproject:edit"
                                                th:onclick="openCreateRoleModal([[${tableData.deptId}]],[[${tableData.code}]],[[${tableData.taskStatue}]],[[${tableData.status}]])">

                                            <span class="Bold">编辑</span>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="1"
                                        style="box-shadow:#e4644a 0px 6px 0px; border-radius:0px 0px 5px 5px;padding-bottom:8px;"></td>
                                    <td style="box-shadow: #6A737A 0px 6px 0px; border-radius:0px 0px 5px 5px;padding-bottom:8px;"></td>
                                    <td style="box-shadow:#6A6545 0px 6px 0px; border-radius:0px 0px 5px 5px;padding-bottom:8px;"></td>
                                    <td style="box-shadow:#468395 0px 6px 0px; border-radius:0px 0px 5px 5px;padding-bottom:8px;"></td>
                                    <!--<td style="box-shadow: #5B7898 0px 6px 0px; border-radius:0px 0px 5px 5px;padding-bottom:8px;"></td>-->
                                    <!--<td style="box-shadow: #B36648 0px 6px 0px; border-radius:0px 0px 5px 5px;padding-bottom:8px;"></td>-->
                                    <!--<td style="box-shadow: #776600 0px 6px 0px; border-radius:0px 0px 5px 5px;padding-bottom:8px;"></td>-->
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row" id="toolbarOld">
                        <div class="pull-right"
                             style=" font-size: 16px; font-family: 'Microsoft YaHei UI'; line-height: 50px;">
                            <i class="fa fa-circle-o text-grey"></i>&nbsp;未开始
                            <i class="fa fa-clock-o text-yellow"></i>&nbsp;执行中
                            <i class="fa fa-circle text-green"></i>&nbsp;已完成
                            <i class="fa fa-circle text-red"></i>&nbsp;不需要
                        </div>
                    </div>
                </div>
                <div class="box-body" style=" font-size: 16px; background-color: #EBF4F9; min-height: 450px;">
                    <div id="divRight" class="hidden" style="background-color: #FFFFFF; width: 30px;text-align: center;
                     border: solid 1px #eee; cursor: pointer; float: left; height: 450px; line-height: 450px; margin: auto 0px; border-radius: 2px; "
                         onclick="rightDiv();">
                        <i class="fa fa-caret-right" style="color: #3C8DBC; font-size: 20px;"></i>
                    </div>
                    <div class="box" id="divLeft"
                         style="width:13%; float: left; height: 100%; min-height: 450px; min-width: 170px;">
                        <div class="box-header"
                             style="height: 60px; line-height: 40px; vertical-align: middle; text-align: center; ">
                            <i class="fa fa-list" style="color: #333; cursor: pointer; line-height: 20px; "
                               onclick="initZonglanDiv()">&nbsp;&nbsp;&nbsp;任务明细</i>
                            <div style="background-color: #F8F8F8; width: 20px;text-align: center; border: solid 1px #eee; cursor: pointer; float: right; height: 40px; line-height: 40px; margin: auto 0px; "
                                 onclick="leftDiv();">
                                <i class="fa fa-caret-left" style="color: #3C8DBC; font-size: 18px;"></i>
                            </div>
                        </div>
                        <div class="box-body" style="border-top: 1px solid #EEEEEE;">
                            <div id="proStruct-tree" class="ztree"></div>
                        </div>
                    </div>

                    <div class="box" style="width:85%; float: left; margin-left: 1%; min-height: 450px;" id="contetDiv">
                        <div id="topDiv" style="display: none;">
                            <div class="box-header">
                                <h4>工艺编制</h4>
                            </div>
                            <div class="box-body">
                                <div>
                                    <table id="craft-table"
                                           style="table-layout: fixed;word-break:break-all; word-wrap:break-word;font-size:12px;"></table>
                                </div>
                            </div>
                        </div>
                        <div id="middleDiv" style="display: none;">
                            <div class="box-header">
                                <a class="btn btn-info pull-right"
                                   th:href="@{/craft/proQuery/outPage(proCode = ${craProQueryModel.code},reportType=3)}"
                                target="_blank">查看详细</a>
                                <h4>原料计划</h4>
                            </div>
                            <div class="box-body">
                                <div>
                                    <table id="material-table"
                                           style="table-layout: fixed;word-break:break-all; word-wrap:break-word;font-size:12px;"></table>
                                </div>
                            </div>
                        </div>

                        <div id="lastDiv" style="display: none;">
                            <div class="box-header">
                                <a class="btn btn-info pull-right"
                                   th:href="@{/craft/proQuery/outPage(proCode = ${craProQueryModel.code},reportType=2)}"
                                   target="_blank">查看详细</a>
                                <h4>外协计划</h4>
                            </div>
                            <div class="box-body">
                                <div>
                                    <table id="outsourcing-table"
                                           style="table-layout: fixed;word-break:break-all; word-wrap:break-word;font-size:12px;"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<input type="hidden" id = "aaa" th:value="${sheet}">-->
    </div>
</section>

<!--创建类型模态框-->
<div class="modal fade" id="modal-edit-project">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">工艺任务状态编辑</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-edit" class="form-horizontal">
                    <input type="hidden" id="deptId" name=""/>
                    <input type="hidden" id="code" name=""/>
                    <div class="form-group" style=" margin-top: 10px;">
                        <label class="col-sm-2 control-label">工艺编制</label>

                        <div style="float: left;margin-top: 7px;">
                            <input type="radio" name="gongyiSJ" value="4">不需要
                        </div>
                        <div style="float: left; margin-left: 15px;margin-top: 7px;">
                            <input type="radio" name="gongyiSJ" value="1">未开始
                        </div>
                        <div style="float: left; margin-left: 15px;margin-top: 7px;">
                            <input type="radio" name="gongyiSJ" value="2">执行中
                        </div>
                        <div style="float: left; margin-left: 15px;margin-top: 7px;">
                            <input type="radio" name="gongyiSJ" value="3">已完成
                        </div>
                    </div>
                    <div class="form-group" style=" margin-top: 10px;">
                        <label class="col-sm-2 control-label">成本信息输出</label>

                        <div style="float: left;margin-top: 7px;">
                            <input type="radio" name="chengbenSC" value="4">不需要
                        </div>
                        <div style="float: left; margin-left: 15px;margin-top: 7px;">
                            <input type="radio" name="chengbenSC" value="1">未开始
                        </div>
                        <div style="float: left; margin-left: 15px;margin-top: 7px;">
                            <input type="radio" name="chengbenSC" value="2">执行中
                        </div>
                        <div style="float: left; margin-left: 15px;margin-top: 7px;">
                            <input type="radio" name="chengbenSC" value="3">已完成
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-create-type">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>

<script th:inline="javascript">
    let  typeName = ['', '外购件', '外协件', '原材料'];
    /** 打开角色模态框 */
    function openCreateRoleModal(idd, code,statusSj1,statusSC1) {
        $("#deptId").val(idd);
        $("#code").val(code);
        $("input[name='gongyiSJ'][value="+statusSj1+"]").attr("checked",true);
        $("input[name='chengbenSC'][value="+statusSC1+"]").attr("checked",true);
        js.modal.open("modal-edit-project");
    }

    /** 模态框编辑后保存 */
    $("#btn-create-type").click(function () {
        var deptId = $("#deptId").val();
        var  code= $("#code").val();
        var statusSj = $(':radio[name="gongyiSJ"]:checked').val();
        var statusSC = $(':radio[name="chengbenSC"]:checked').val();
        js.post({
            url: ctx + "craft/proQuery/detail/status",
            data: {deptId: deptId, statusSj: statusSj, statusSC: statusSC,code:code},
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    // js.table.refresh(table);
                    js.modal.hide("modal-edit-project");
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
                location.reload();
            }
        });
    });
    $("#toggle").click(function () {
        $(".menu").toggleClass("closed");
        $(this).toggleClass("closed");
        $(".content").toggleClass("closed");
        $("#wrapper").toggleClass("closed")
    });

    function rightDiv() {
        $("#divRight").addClass("hidden");
        $("#divLeft").removeClass("hidden");
        $("#contetDiv").css("width", "85%");
    }

    function leftDiv() {
        $("#divLeft").addClass("hidden");
        $("#divRight").removeClass("hidden");
        $("#contetDiv").css("width", "95%");
    }

    /**
     * 初始化时候就执行
     */
    // initZonglanDiv();


    // /**
    //  * 务总览页面
    //  */
    // function initZonglanDiv() {
    //     $("#zonglanDiv").show();
    //     $("#topDiv").show();
    //     $("#middleDiv").show();
    //     $("#lastDiv").show();
    //     $("#contetDiv").show();
    //
    // }

    function selectDetail(part,special) {
        $("#zonglanDiv").show();
        $("#topDiv").show();
        $("#middleDiv").show();
        $("#lastDiv").show();
        $("#contetDiv").show();
        var table1;
        /** 加载采集数据表格 */
        $('#craft-table').bootstrapTable('destroy');
        table1 = js.table.init({
            id: "craft-table",
            url: ctx + "craft/proQuery/detail/craft",
            queryData: {proCode: [[${craProQueryModel.code}]],special: special,part: part},
            // showColumns: false,
            showExport: false,
            pagination: false,
            // pageSize: 10,
            columns: [
                {

                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: "分类", field: 'reportType',
                    formatter: function (value) {
                        return '<span >工艺编制</span>';
                    }
                },
                {title: "类型", field: 'special'},
                {title: "部分", field: 'part'},
                // {title: "提报类型", field: 'sheetType',
                //     formatter: function (value) {
                //         return value === 1 ? '提报单' : '变更单';
                //     }
                // },
                // {title: "提报状态", field: 'status',
                //     formatter: function (value,row) {
                //
                //         return '<span class="badge label-success">审核通过</span>';
                //     }
                // },
                {title: "分配科室", field: 'deptName'},
                // {title: "定额提交时间", field: 'commitTime'},
                {title: "下发日期", field: 'verifyTime'},
                {title: "审批人", field: 'checkNames'}
            ]
        });
        var table2;
        /** 原料计划表格 */
        $('#outsourcing-table').bootstrapTable('destroy');
        table2 = js.table.init({
            id: "outsourcing-table",
            url: ctx + "craft/proQuery/detail/material",
            queryData: {proCode: [[${craProQueryModel.code}]],special: special,part: part},
            // queryData: {id: para},
            // showColumns: false,
            showExport: false,
            pagination: false,
            // pageSize: 10,
            columns: [
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: "分类", field: 'reportType',
                    formatter: function (value) {
                        return typeName[value];
                    }
                },
                // {title: "项目编号", field: 'proCode'},
                // {title: "项目名称", field: 'proName',width: '300'},
                // {title: "项目数量", field: 'proNum'},
                {title: "类型", field: 'malType'},
                {title: "部分", field: 'part'},
                {title: "提报类型", field: 'sheetType',
                    formatter: function (value) {
                        return value === 1 ? '提报单' : '变更单';
                    }
                },
                {title: "提报状态", field: 'status',
                    formatter: function (value,row) {

                        return '<span class="badge label-success">审核通过</span>';
                    }
                },
                {title: "提报人", field: 'postName'},
                {title: "提报科室", field: 'branchName'},
                {title: "提报日期", field: 'commitTime'},
                {title: "批准时间", field: 'verifyTime'}
            ]
        });
        var table3;
        /** 外协计划表格 */
        $('#material-table').bootstrapTable('destroy');
        table3 = js.table.init({
            id: "material-table",
            url: ctx + "craft/proQuery/detail/outsourcing",
            queryData: {proCode: [[${craProQueryModel.code}]],special: special,part: part},
            // queryData: {id: para},
            // showColumns: false,
            showExport: false,
            pagination: false,
            // pageSize: 10,
            columns: [
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: "分类", field: 'reportType',
                    formatter: function (value) {
                        return typeName[value];
                    }
                },
                // {title: "项目编号", field: 'proCode'},
                // {title: "项目名称", field: 'proName',width: '300'},
                // {title: "项目数量", field: 'proNum'},
                {title: "类型", field: 'malType'},
                {title: "部分", field: 'part'},
                {title: "提报类型", field: 'sheetType',
                    formatter: function (value) {
                        return value === 1 ? '提报单' : '变更单';
                    }
                },
                {title: "提报状态", field: 'status',
                    formatter: function (value,row) {

                            return '<span class="badge label-success">审核通过</span>';
                    }
                },
                {title: "提报人", field: 'postName'},
                {title: "提报科室", field: 'branchName'},
                {title: "提报日期", field: 'commitTime'},
                {title: "批准时间", field: 'verifyTime'}
            ]
        });
    }

    /** 加载左侧产品结构数据 */
    function queryProStruceTree() {
        debugger
        let kk =  [[${craProQueryModel.proId}]];
        proStructTree = js.tree.init({
            id: "proStruct-tree",
            async: {
                url: ctx + "craft/proQuery/proStruct/" + $("#proId").val(),
            },
            check: {
                enable: false,                                                 // 是否显示多选框
            },
            data: {
                key: {
                    name: "proName"        // 节点数据保存节点名称的属性名称
                }
            },
            onClick: zTreeOnClick,
            beforeClick: zTreeBeforeClick
        });

        /** 展开左侧产品结构数据 */
        setTimeout(function () {
            proStructTree.expandAll(true);
        }, 500);

        /** 左侧产品树节点点击事件 */
        function zTreeOnClick(event, treeId, treeNode) {

            var parentName = "";
            if (treeNode.getParentNode() != null) {
                parentName = treeNode.getParentNode().proName;
            }
            readData(treeNode.proName, parentName);
        };

        function zTreeBeforeClick() {
            return true;
        };

    };
    $(function () {
        queryProStruceTree();
    });
    /** 右侧列表加载 */
    function readData(paramType, parentName) {

        /** 左侧计划表单数据加载 */
        selectDetail(paramType, parentName);
    }
</script>


